<template>
  <div class="wrap">
    <!-- <div class="wrap-button" style="height: 28px">
      <div style="float: right">
        <a-select
          placeholder="选择租户"
          v-model:value="value1"
          style="width: 180px; margin-right: 8px"
          @change="handleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-select
          placeholder="选择设备"
          v-model:value="value1"
          style="width: 180px; margin-right: 8px"
          @change="handleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-range-picker v-model:value="value2" style="margin-right: 8px" />
        <a-input
          v-model:value="keyword"
          style="width: 180px; margin-right: 8px"
          placeholder="输入关键字查询"
        >
          <template #prefix>
            <user-outlined />
          </template>
        </a-input>
        <a-button type="primary" style="margin-right: 8px" @click="list">查询</a-button>
        <a-button type="primary" @click="handleSearch">导出</a-button>
      </div>
    </div> -->
    <div style="flex: 1">
      <a-table
        :loading="loading"
        :dataSource="data"
        :columns="columns"
        :pagination="pagination"
        size="middle"
        @change="handleTableChange"
        :scroll="{ x: 'max-content' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'dataSource'">
            <a-tag v-if="record.dataSource === 1" color="cyan">开始</a-tag>
            <a-tag v-else-if="record.dataSource === 2" color="cyan">结束</a-tag>
            <a-tag v-else-if="record.dataSource === 3" color="cyan">暂停</a-tag>
            <a-tag v-else-if="record.dataSource === 4" color="cyan">段数据</a-tag>
            <a-tag v-else-if="record.dataSource === 5" color="cyan">定时</a-tag>
            <a-tag v-else color="red">未知</a-tag>
          </template>
          <template v-if="column.key === 'pileStatus'">
            <a-tag v-if="record.pileStatus === 1" color="cyan">停钻</a-tag>
            <a-tag v-else-if="record.pileStatus === 2" color="cyan">下钻</a-tag>
            <a-tag v-else-if="record.pileStatus === 3" color="cyan">提钻</a-tag>
            <a-tag v-else-if="record.pileStatus === 4" color="cyan">复下</a-tag>
            <a-tag v-else-if="record.pileStatus === 5" color="cyan">复提</a-tag>
            <a-tag v-else color="red">未知</a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag v-if="record.pileStatus === 0" color="cyan">已处理</a-tag>
            <a-tag v-else-if="record.pileStatus === 1" color="cyan">未处理</a-tag>
            <a-tag v-else color="red">未知</a-tag>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- <a-button class="button-interval" type="link" :icon="h(FileTextOutlined)" size="small">
              查看
            </a-button> -->
            <a-button
              class="button-interval"
              type="link"
              :icon="h(SettingOutlined)"
              size="small"
              @click="handleSetting(record)"
            >
              设置
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { h, ref, onMounted, reactive, watch, computed } from 'vue'
  import {
    DeleteOutlined,
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
  } from '@ant-design/icons-vue'
  import { FormInstance, message } from 'ant-design-vue'
  import { BaseTitle } from '/@/components/Title'
  import { listWarningRule } from '/@/api/pd/warning'
  import { WarningRuleResult } from '/@/api/pd/model/warningModel'
  import { Modal } from 'ant-design-vue'
  import Echarts from '/@/components/ReEcharts/index.vue'
  import { EChartsOption } from 'echarts'
  import type { Dayjs } from 'dayjs'

  const open = ref<boolean>(false)
  const openPermission = ref<boolean>(false)
  const loading = ref(false)
  const showBaseFlag = ref(true)
  const hideText = ref('收起')
  const value1 = ref('a')
  const expandedRowKeys = ref<string[]>([])
  type RangeValue = [Dayjs, Dayjs]
  const value2 = ref<RangeValue>()

  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 15,
    size: '',
    showSizeChanger: false,
    showQuickJumper: false,
  })

  const recordSo = computed(() => ({
    deviceCode: '',
    machCode: '',
    startTime: '',
    endTime: '',
  }))

  const pageParam = computed(() => ({
    query: recordSo.value,
    current: pagination.value?.current,
    size: pagination.value?.pageSize,
  }))

  const columns = [
    {
      title: '预警项',
      dataIndex: 'warningItem',
      key: 'warningItem',
      align: 'center',
      width: 140,
      fixed: 'left',
    },
    {
      title: '允许最小值',
      dataIndex: 'warningMin',
      key: 'warningMin',
      align: 'center',
      width: 80,
    },
    {
      title: '允许最大值',
      dataIndex: 'warningMax',
      key: 'warningMax',
      align: 'center',
      width: 80,
    },
    {
      title: '阈值范围',
      dataIndex: 'warningLimit',
      key: 'warningLimit',
      align: 'center',
      width: 80,
    },
    {
      title: '预警级别',
      dataIndex: 'warningLevel',
      key: 'warningLevel',
      align: 'center',
      width: 80,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: 80,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      align: 'center',
      width: 80,
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      align: 'center',
      width: 40,
    },
  ]

  let data = ref<WarningRuleResult[]>([])

  let checkedKeys = ref<string[]>(['3'])

  interface Props {
    width?: string
    height?: string
    option: EChartsOption
  }
  const props = withDefaults(defineProps<Props>(), {
    width: '100%',
    height: '100%',
    option: () => ({}),
  })

  watch(checkedKeys, () => {
    console.log('checkedKeys', checkedKeys)
  })

  //#endregion

  onMounted(() => {
    list()
  })

  async function list() {
    loading.value = true
    const res = await listWarningRule(pageParam.value)
    console.log('res', res)
    data.value = res.records
    pagination.value.total = Number(res.total)
    pagination.value.current = Number(res.current)
    loading.value = false
  }

  function handleTableChange(page) {
    pagination.value.current = page.current
    list()
  }

  //#endregion
</script>

<style lang="scss" scoped>
  .wrap {
    max-width: calc(100vw - 230px);
    &-table {
      margin-top: 16px;
    }
  }

  .base-enter-active,
  .base-leave-active {
    transition: opacity 0.4s;
  }
  .base-enter,
  .base-leave-active {
    opacity: 0;
  }
</style>
